/**
* 选择物料申请
*/
<template>
    <vp-dialog ref="editDialogRef" :span="4">
        <template #title>
            <vp-label zh="选择物料申请" en="" align="left" />
        </template>
        <vp-card class="mb5">
            <el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
                label-width="120px">
                <vp-search-row :show-more="showMore">
                    <vp-search-col>
                        <el-form-item prop="wllxList">
                            <template #label><vp-label zh="物料类型" en="Material Cat." /></template>
                            <el-select v-model="searchForm.wllxList" placeholder="请选择" multiple clearable>
                                <el-option label="航材" :value="10"><vp-label zh="航材"
                                        en="Aircraft Material"></vp-label></el-option>
                                <el-option label="化工品" :value="20"><vp-label zh="化工品"
                                        en="Chemical"></vp-label></el-option>
                                <el-option label="工具" :value="30"><vp-label zh="工具" en="Tool"></vp-label></el-option>
                            </el-select>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item prop="jh">
                            <template #label><vp-label zh="件号/产品名" en="Product Name" /></template>
                            <el-input v-model="searchForm.jh" v-trim></el-input>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item prop="zwms">
                            <template #label><vp-label zh="名称" en="Name" /></template>
                            <el-input v-model="searchForm.zwms" v-trim></el-input>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item prop="tdjjh">
                            <template #label><vp-label zh="替代件号" en="" /></template>
                            <el-input v-model="searchForm.tdjjh" v-trim></el-input>
                        </el-form-item>
                    </vp-search-col>

                    <vp-search-col btn-col>
                        <vp-btn-search :loading="loading" @click="loadDataList" />
                        <vp-btn-reset @click="handleSearchReset" />
                        <vp-btn-more @change="showMore = $event" />
                    </vp-search-col>
                </vp-search-row>
            </el-form>
        </vp-card>
        <vp-card v-loading="loading">
            <el-table :data="tableData" ref="tableRef" highlight-current-row stripe border style="width: 100%"
                row-key="id" @selection-change="handleSelectionChange" @row-click="handleRowClick">
                <el-table-column v-if="multi" type="selection">
                </el-table-column>
                <el-table-column type="index" align="center" label="#">
                </el-table-column>
                <el-table-column prop="wllx" show-overflow width="200">
                    <template #header><vp-label zh="物料类型" en="Material Cat." /></template>
                    <template #default="scope">
                        <vp-label v-if="scope.row.wllx == 10" zh="航材" en="Aircraft Material" />
                        <vp-label v-else-if="scope.row.wllx == 20" zh="化工品" en="Chemical" />
                        <vp-label v-else-if="scope.row.wllx == 30" zh="工具" en="Tool" />
                    </template>
                </el-table-column>
                <el-table-column prop="jh" show-overflow>
                    <template #header><vp-label zh="件号/产品名" en="P/N" /></template>
                </el-table-column>
                <el-table-column prop="zwms" show-overflow>
                    <template #header><vp-label zh="名称" en="Name" /></template>
                    <template #default="{ row }">
                        <div style="display: flex;gap: 1px;">
                            <el-tag>中:{{ row.zwms }}</el-tag>
                            <el-tag>英:{{ row.ywms }}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                  <el-table-column prop="tdjjh" show-overflow>
                    <template #header><vp-label zh="替代件号" en="" /></template>
                </el-table-column>
                      <el-table-column prop="xingh" show-overflow>
                    <template #header><vp-label zh="型号" en="" /></template>
                </el-table-column>
                      <el-table-column prop="gg" show-overflow>
                    <template #header><vp-label zh="规格" en="" /></template>
                </el-table-column>
                <el-table-column prop="syjx" show-overflow>
                    <template #header><vp-label zh="适用机型" en="Applicable AC Type" /></template>
                    <template #default="{ row }">
                        {{ row.syjx == 10 ? 'ALL' : row.actTypeName }}
                    </template>
                </el-table-column>
                <el-table-column prop="gljb" show-overflow width="140">
                    <template #header><vp-label zh="管理级别" en="Management Level" /></template>
                    <template #default="{ row }">
                        {{ row.gljb == 10 ? '序列号管理' : row.gljb == 20 ? '批次号管理' : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="lysm" show-overflow>
                    <template #header><vp-label zh="件号来源" en="" /></template>
                </el-table-column>
            </el-table>
            <el-pagination background class="mt5" layout="prev, pager, next, total" :total="page.total"
                v-model:currentPage="page.pageNum" v-model:pageSize="page.pageSize" :hide-on-single-page="false">

            </el-pagination>
            <div style="float: right;padding-top: 8px;padding-bottom: 8px;">
                <el-popover placement="top-end" :width="700" trigger="click" v-if="multi">
                    <template #reference>
                        <el-badge :value="multipleSelection.length" type="primary">
                            <vp-btn-selected></vp-btn-selected>
                        </el-badge>
                    </template>
                    <el-table :data="multipleSelection" border stripe max-height="500" row-key="id">
                        <el-table-column prop="wllx" show-overflow width="200">
                            <template #header><vp-label zh="物料类型" en="Material Cat." /></template>
                            <template #default="scope">
                                <vp-label v-if="scope.row.wllx == 10" zh="航材" en="Aircraft Material" />
                                <vp-label v-else-if="scope.row.wllx == 20" zh="化工品" en="Chemical" />
                                <vp-label v-else-if="scope.row.wllx == 30" zh="工具" en="Tool" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="jh"><template #header><vp-label zh="件号/产品名"
                                    en="Product Name" /></template></el-table-column>
                        <el-table-column prop="zwms" show-overflow>
                            <template #header><vp-label zh="名称" en="Name" /></template>
                            <template #default="{ row }">
                                <div style="display: flex;gap: 1px;">
                                    <el-tag>中:{{ row.zwms }}</el-tag>
                                    <el-tag>英:{{ row.ywms }}</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column width="75">
                            <template #header>
                                <vp-label-operations />
                            </template>
                            <template #default="{ row }">
                                <vp-btn-del text @click="handleSelectedDelete(row)" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-popover>
            </div>
        </vp-card>
        <template #footer>
            <vp-btn-empty @click="handleClear" />
            <vp-btn-confirm @click="handleSave" />
        </template>
    </vp-dialog>
</template>

<script setup lang="ts" name="VpBasedataMaterialDialog">
import { reactive, ref, watch, computed } from 'vue';
import { DIALOG_PAGE } from '/@/utils/page';
import request from '/@/utils/request';


const searchForm = ref({
    qyzt:"10",
    jh: "",
    zwms: "",
    wllxList: [] as any[],
    tdjjh: "",
});

const page = reactive({
    ...DIALOG_PAGE,
});

const tableData = ref([]);
const loading = ref(false);
const callback = ref((data: any) => { });

//是否多选 
const multi = ref(false);

const tableRef = ref();
const editDialogRef = ref();
const searchFormRef = ref();
const showMore = ref(false);

//选择的数据
const multipleSelection = ref([]);
const singleSelection = ref<selectData | null>(null);


interface selectData {
    id: string;
    wllx: number,
    jh: string,
    zwms: string,
    ywms: string,
    tdjjh: string,
    xingh: string,
    gg: string,
    lysm: string,
    jldw: string,
}
const handleOpen = (param: any) => {
    editDialogRef.value.handleOpen();

    multipleSelection.value = [];
    singleSelection.value = null;

    if (param.callback && typeof param.callback === "function") {
        callback.value = param.callback;
    }
    if (!param.wllxList) {
        searchForm.value.wllxList = [];
    } else if (typeof (param.wllxList) === 'string') {
        searchForm.value.wllxList = [param.wllxList];
    } else {
        searchForm.value.wllxList = param.wllxList;
    }
    multi.value = param.multi;
    loadDataList();
}

watch(() => page.pageNum, () => {
    loadDataList();
})

const loadDataList = () => {
    loading.value = true;
    request.get('/basicData/material/pageListModel', {
        params: {
            ...searchForm.value,
            ...page,
        }
    }).then(res => {
        tableData.value = res?.data?.list || [];
        page.total = res?.data?.total || 0;
        page.pageNum = res?.data?.pageNum || 1;
    }).finally(() => {
        loading.value = false;
    })
}


const handleSearchReset = () => {
    searchFormRef.value.resetFields();
}

const handleRowClick = (row: any) => {
    if (!multi.value) {
        tableRef.value.clearSelection();
        tableRef.value.toggleRowSelection(row, true);
    } else {
        tableRef.value.toggleRowSelection(row);
    }
}


const handleSelectionChange = (val: any) => {
    if (!multi.value) {
        const formatted = val.length > 0 ? formatObject(val[val.length - 1]) : null;
        singleSelection.value = formatted;
    } else {
        multipleSelection.value = val.map((item: any) => {
            const formatted = formatObject(item);
            return formatted || ({} as selectData);
        }).filter(Boolean);
    }
}
const handleSelectedDelete = (val: any) => {
    tableRef.value.toggleRowSelection(val, false);
}

const formatObject = (row: any): selectData | null => {
    if (row == null) {
        return null;
    }
    return {
        id: row.id,
        wllx: row.wllx,
        jh: row.jh,
        zwms: row.zwms,
        ywms: row.ywms,
        tdjjh: row.tdjjh,
        xingh: row.xingh,
        gg: row.gg,
        lysm: row.lysm,
        jldw: row.jldw,
    };
}

// 计算属性：根据模式返回当前选中的数据
const currentSelected = computed<selectData | selectData[]>(() => {
    if (multi.value) {
        return multipleSelection.value;
    } else {
        return singleSelection.value || ({} as selectData);
    }
});

const handleSave = () => {
    if (loading.value) {
        return;
    }
    callback.value(currentSelected.value);
    editDialogRef.value.handleClose();
}
const handleClear = () => {
    if (loading.value) {
        return;
    }
    callback.value({});
    editDialogRef.value.handleClose();
}

defineExpose({
    handleOpen
})
</script>
